<template>
  <div
    class="x-bar"
    :id="chartId"
    :option='option'>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String
    },
    options: {
      type: Object
    }
  },
  data () {
    return {
      option: {
        tooltip: {
          position: 'top',
          formatter: function (params) {
            return params.value[2];
          }
        },
        grid: {
          top: '5%',
          left: '8%',
          bottom: '8%',
          right: '8%'
        },
        xAxis: {
          type: 'category',
          data: this.options.xData,
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#999',
              type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#b3b3b3'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'category',
          data: this.options.yData,
          show: false
        },
        series: [{
          type: 'scatter',
          symbolSize: function (val) {
            return 20 * 2;
          },
          data: this.options.sData,
          animationDelay: function (idx) {
            return idx * 5;
          }
        }]
      }
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if(this.chart) {
          if (newVal) {
            this.option.xAxis.data = newVal.xData;
            this.option.yAxis.data = newVal.yData;
            this.option.series[0].data = newVal.sData;
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        }else {
          this.init();
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  }
}
</script>

<style lang="stylus" scoped>
.x-bar{
  width 100%
  height 100%
}
</style>